<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>

</style>

<body>
    <div id="app">
        <!-- <sun-selectall></sun-selectall>
        <sun-productitem></sun-productitem> -->
        <sun-productlist :list="list"></sun-productlist>

    </div>
    <template id="selectall">
        <input type="checkbox" :checked="isAllChecked" @change="toggleAll">全选
    </template>
    <template id="productitem">
        <div class="box">
            <input type="checkbox" v-model="item.checked">
            名称：<span>{{ item.name }}</span>
            单价：<span>{{ item.price.toFixed(2) }}</span>
            数量：<button @click="decrementNum" :disabled="item.num <= 1">-</button>
            <span>{{ item.num.toFixed(2) }}</span>
            <button @click="incrementNum" :disabled="item.num >= item.max">+</button>
            金额：<span>{{ (item.price * item.num).toFixed(2) }}</span>
            <button @click="removeItem">删除</button>
        </div>
    </template>
    <template id="productlist">
        <sun-selectall @change="toggleSelectAll"></sun-selectall>
        <div class="box" v-for="(item, index) in list" :key="index">
            <sun-productitem :item="item" @update:num="updateNum($event, index)"
                @update:checked="updateChecked($event, index)" @remove="removeItem($event)"></sun-productitem>
        </div><br>
        {{ checkedCount }}件商品总计(不含运费): <span>{{ totalPrice.toFixed(2) }}</span>
    </template>
</body>
<script src="./vue.js"></script>
<script type="module">
    const { createApp, ref, computed } = Vue
    import selectall from './SelectAll.js'
    import productitem from './ProductItem.js'
    import productlist from './Productlist.js'
    const app = createApp({
        setup() {
            const list = ref([{
                name: "西瓜",
                price: 5,
                num: 1,
                max: 100,
                checked: false
            }, {
                name: "提子",
                price: 12,
                num: 5,
                max: 50,
                checked: false

            }, {
                name: "榴莲",
                price: 29.9,
                num: 1,
                max: 20,
                checked: false
            }])

            return {
                list
            }
        }
    })
    app.component("sun-productlist", productlist)
    app.component("sun-selectall", selectall)
    app.component("sun-productitem", productitem)
    app.mount("#app")
</script>

</html>